<template>
 <div class="newLogin">
	<div class="wrapper" :class="{'form-success': loginSuccess}">
		
		<!-- <img src="../images/logo.png" class="logo"> -->

		<div class="container" >
			<h1>Welcome</h1>
			<form class="form">
				<input type="text" placeholder="Username" v-model="username">
				<input type="password" placeholder="Password" v-model="password">
				<p class="error">{{inputError}}</p>
				<button type="button" @click="login">Login</button>
			</form>
		</div>
		
		<ul class="bg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

	</div>
</div>
</template>

<script type="text/ecmascript-6">
import api from "../api/auth";

const SUCCESS = 0;
export default {
  data() {
    return {
      loginSuccess: false,
      username: "",
      password: "",
      inputError: ""
    };
  },
  created() {},
  mounted() {
    document.onkeydown = () => {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.keyCode == 13) {
        this.login();
      }
    };
  },
  methods: {
    login() {
      this.inputError = "";

      if (!this.username) {
        this.inputError = "请输入用户名!";
        return;
      }

      if (!this.password) {
        this.inputError = "请输入密码!";
        return;
      }

      if (this.password.length < 6 || this.password.length > 16) {
        this.inputError = "密码在6~16位之间!";
        return;
      }

      this._commitForm();
    },
    _commitForm() {
      let form = {
        username: this.username,
        password: this.password
      };
      api.userLogin(form).then(response => {
        console.log(response);
        //账号存在
        if (response.code == SUCCESS) {
          const data = response.data;
          let token = data.token;
          let username = data.username;
          this.$store.dispatch("UserLogin", token);
          this.$store.dispatch("UserName", username);

          //localStorage,sessionStorage保存token
          // sessionStorage.setItem('token', token);

          this.loginSuccess = true;

          setTimeout(() => {
            this.$router.push({ path: "/index" });
          }, 1800);
        } else {
          this.$message({
            type: "info",
            message: response.message
          });
        }
      });
    }
  }
};
</script>

<style lang="less">
@import "./login.less";
</style>

